<template>
  <div class="Echarts">
    <div id="main" style="width: 300px;height: 240px;">
      <div id="ding"> 试题目录</div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  mounted() {
    this.myEcharts()
  },
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById('main'))
      // 配置图表
      var option = {

        radar: {
                radius: '70%',
                indicator: [
                    { text: '逻辑思维', max: 400 },
                    { text: '项目相关', max: 400 },
                    { text: '基础知识', max: 400 },
                    { text: '理论基础', max: 400 },
                    { text: '高阶技术', max: 400 },
                ],
                xAxis: {
                    alignTicks: false,
                },

                name: {
                    textStyle: {
                        padding: [-10, -10],
                    },
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#ccc', // 图表背景的颜色
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: '#fff', // 设置网格的颜色
                    },
                },
            },
            series: (function () {
                var series = []

                for (var i = 1; i <= 28; i++) {
                    series.push({
                        type: 'radar',
                        symbol: 'none',
                        areaStyle: { color: '#32dadd' },
                        data: [
                            {
                                value: [300, 290, 230, 260, 290],
                            },
                        ],
                    })
                }
                return series
            })(),
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>
 #ding{
  display: inline-block;
  height: 30px;
  margin-top: -60px;
  border-radius: 4px;
  color: #99a9bf;
  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;
}
</style>
